<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0324vue</title>
    <style>
        .main {
            width: 300px;
            margin: 50px 20px;
            float: left;
        }

    </style>
</head>

<body>



    <div id="app" v-clock>
        <div v-for="(item,index) in list" class="main">
            <div v-if="item.data - item.data1 > 0">
                <img width="300" height="250" :src="item.image" alt="" srcset="">
                <div>{{item.name}}</div>
                <div>库存:{{item.data - list[index].data1}}</div>
                <input type="text" v-model="list[index].data1">
                <!-- <input type="button" value="购买" @click="getdata(item.id,list[index].data1)"> -->
                <br/>
                <button @click="deleteCommodity(index)">删除商品</button>
            </div>
        </div>


        <button @click="addCommodity">新增商品</button>



    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        Vue.createApp({
            data() {
                return {
                    list: [
                        { id: 0, data: 100, data1: null, name: "新鲜水果", image: "https://tse1-mm.cn.bing.net/th/id/OIP-C.WJ8I9XKR9CuFgMov1n65QgHaE8?w=304&h=203&c=7&r=0&o=5&pid=1.7" },
                        { id: 1, data: 100, data1: null, name: "iphone14", image: "https://tse3-mm.cn.bing.net/th/id/OIP-C.5-JhK658fp4WF3LTn9VOBAHaEy?w=273&h=180&c=7&r=0&o=5&pid=1.7" },
                        { id: 2, data: 100, data1: null, name: "五菱宏光mini", image: "https://tse2-mm.cn.bing.net/th/id/OIP-C.SJR8DPPK7fvQASUeGQMjnAHaEw?w=274&h=180&c=7&r=0&o=5&pid=1.7" }
                    ]
                }
            },
            methods: {
                // getdata(id, data) {
                //     this.list[id].data -= data
                // },
                // 新增商品方法
                addCommodity(){
                    let  h = this.list
                    h.push({id:h.length,data:100,data1:null,name:"Vue js设计与实现",image:"https://img10.360buyimg.com/n1/jfs/t1/93653/3/28192/26760/62599880Eee904d1a/1344c38e8df28914.jpg"})
                    this.list = h
                },
                //删除商品 (有个坑要使用v-for循环中的index)
                deleteCommodity(index){
                    this.list.splice(index,1)
                }
            }



        }).mount("#app")



    </script>






</body>

</html>